<template>
    <div id="playerBar">
            <transition name="slide">
                <div class="player-bot" v-show="!showPlayer" v-if="showBar"
                 key="bot" @click="showPlayerView(true)" >
                    <div class="pic">
                        <img  :src="albumPic" >
                    </div>
                    <div class="msg">
                        <span class="songname">{{song.name}}</span>
                    </div>
                    <div class="controls">
                        <span class="iconfont icon-shangyishou" @click.stop="playBtnEvent('-')"></span>
                        <span class="iconfont" :class="isPlaying? 'icon-zanting':'icon-play' " @click.stop="playBtnEvent()"></span>
                        <span class="iconfont icon-xiayishou" @click.stop="playBtnEvent('+')"></span>
                    </div>
                </div>
            </transition>
            <transition name="slide">
                <playview v-show="showPlayer" key="view" @show-pv="showPlayerView" :songdata="song" 
                @btns="playBtnEvent"
                ></playview>
            </transition>

    </div>
</template>

<script>

import playview from "./playView.vue"

export default {
    data () {
        return {
            showPlayer:false
        }
    },
    methods:{
        showPlayerView(data){
            this.showPlayer = data;
        },
        playBtnEvent(type="playOrPause") {
            if(type == "playOrPause"){
                this.isPlaying ? this.player.pause():this.player.playSong(); 
                return ;
            }
            if(type == "+"){
                this.$store.commit("nextSong");
            }
            if(type == "-"){
                this.$store.commit("prevSong");
            }
            var index = this.$store.state.index;
            var songlist = this.$store.state.songlist;
            var id = songlist[index].id;
            var song = {
                album: songlist[index].al,
                artist: songlist[index].ar,
                name: songlist[index].name,
                index
            }
            
            this.player.playSong(`http://music.163.com/song/media/outer/url?id=${id}.mp3`);

            this.$store.commit("changeSong",song);

            // this.axios.get("/song/detail",{params:{ ids:id} }).then((res)=>{
            //     console.log(res.data);
                
            //     this.$store.commit("changeSong",res.data.songs[0]);
            // })
        },
    },
    computed: {
        song(){
            return this.$store.state.song;
        },
        isPlaying: function() {
          return this.$store.state.playerState =="play";
        },
        showBar(){
            return this.$store.state.song.album;
        },
        albumPic(){
            return this.$store.state.albumPic;
        }
    },
    components:{
        playview
    },
    mounted(){
        var self = this;
        this.player.addEventListener("ended",function(){
            console.log("ended");
            // 播放完毕自动播放下一首
            this.vm.$store.commit("changePlayerState","ended");
            self.playBtnEvent('+');
        })
    }
}
</script>


<style lang="scss" scoped>
    .player-bot{
        width: 100%;
        height: 50px;
        line-height: 50px;
        background: #1a1a1a;
        position: absolute;
        bottom: 0;
        z-index: 10;
        color:#42b983;
        border-top: 1px solid #666;
        padding: 0 15px;
        overflow: hidden;
        .pic,.msg,.controls{
            display: inline-block;
            vertical-align: middle;
        }
        .pic{    
            width: 35px;
            height: 35px;
            overflow: hidden;
            border-radius: 50%;
            img{
                vertical-align: top;
                height: 100%;
            }
        }
        .msg{
            padding-left: 20px;
            width: calc(100% - 135px);
            p{
                line-height: 25px;
            }
            .songname,.artist{
            }
            .songname{
                display: inline-block;
                vertical-align: top;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 16px;
            }
        }
        .controls{
            width: 100px;
            text-align: center;
            span{
                margin-right: 10px;
                font-size: 25px;
            }
        }
    }
    .player-bot,#playerView{
        transition: all 500ms linear;
    }
    .slide-leave-active{
        transform: translateY(0);
    }
    .slide-leave-to{
        transform: translateY(100%);
    }
    .slide-enter-active{
        transform: translateY(100%);
    }
    .slide-enter-to{
        transform: translateY(0);
    }
    
</style>
